html2canvas生成放大图片

https://github.com/lingdulvlv/html2canvas.git

var width = $('#imageHead')[0].offsetWidth; //dom宽
var height = $('#imageHead')[0].offsetHeight; //dom高
// 解决图片模糊
var scale = 2;//放大倍数
var canvas = document.createElement('canvas');
canvas.width = width * 2;
canvas.height = height * 2;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
var context = canvas.getContext('2d');
context.scale(scale, scale);
//设置context位置,值为相对于视窗的偏移量负值,让图片复位(解决偏移的重点)
var rect = $('#imageHead').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
context.translate(-rect.left, -rect.top);
	context.fillStyle = "red";  
var opts = {
	canvas: canvas,
	backgroundColor: null,
	useCORS: true, // 【重要】开启跨域配置
	scrollY: 0, // 纵向偏移量 写死0 可以避免滚动造成偶尔偏移的现象
};
html2canvas($("#imageHead")[0], opts).then(canvas => {
	// 使用toDataURL方法将图像转换被base64编码的URL字符串
	var src = canvas.toDataURL();
	var newImg = document.createElement("img");
	newImg.src = src;
	imagesAjax(src)
});

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值